<template>
  <div>
    <el-card>
      <div>
        <p>直播管理</p>
      </div>
      <div class="search-item">
        <span class="nm">直播状态：</span>
        <div v-for="(item,index) in pge" :key="index">
          {{item.label||""}}
          <el-select
            v-if="item.type==='select'"
            v-model="searchDat.search"
            :placeholder="item.placeholder||'请输入内容'"
            class="ipt"
          >
            <el-option
              v-for="item in item.options"
              :key="item.search"
              :label="item.label"
              :value="item.search"
            ></el-option>
          </el-select>
        </div>
        <span class="nm1">经纪人搜索：</span>
        <div v-for="(item,index) in pge" :key="index +'-only'">
          <el-input
            v-if="item.type==='input'"
            v-model="searchDat.value"
            :placeholder="item.placeholder||'请输入内容'"
            @input="handle"
            class="ipt"
          ></el-input>
        </div>
      </div>
      <div class="lb">
        <el-table :data="tableData" style="width:100%" >
          <el-table-column prop="img">
            <template slot-scope="scope" >
              <el-image
             
                style="width: 100px; height: 100px"
                :src="scope.row.img"
                :preview-src-list="[scope.row.img]"
              ></el-image>
            </template>
          </el-table-column>

         

      
          <el-table-column prop="date"></el-table-column>
          <el-table-column prop="id"></el-table-column>
          <el-table-column prop="name"></el-table-column>
          
          <el-table-column>
            <template slot-scope="scope">
              <!-- <el-button
          size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
              <el-button size="mini" @click="handleDelet(scope.row)">删除</el-button>
              


            </template>
            
          </el-table-column>
            <el-table-column >

  <el-switch
  v-model="value"
  
  active-color="#13ce66"
  inactive-color="#ff4949">
 
</el-switch>

            </el-table-column>
        </el-table>
        <el-pagination
          :page-size="10"
          layout="prev, pager, next"
          :total="total*1"
          :current-page.sync="obj.current"
          @current-change="changepage"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
// 以上排版label指的是标题，而prop指的是取得名对应的内容
import { streaming, dj, sear } from "../api/user.js";
export default {
  props: {
    pge: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      searchDat: {
        // key:'',
        city: "",
        search: "",
        value: ""
      },
      tableData: [],

      obj: {
        size: 10, //第一页数据条数
        current: 1 //首页,
      },
      total: "",
      getpage: 1,
     value:true,
     
       
      
    };
  },
  created() {
    this.gj();
  },
  methods: {
    gj() {
      streaming({
        size: this.obj.size,
        current: this.obj.current
      }).then(res => {
        this.tableData = res.data;
        this.total = res.total;
      });
    },
    changepage(e) {
      console.log(e);
      //首页=e
      this.obj.current = e;
      this.gj();
    },

    handleDelet(data) {
      dj({ id: data.id }).then(res => {
        console.log(res);
        this.gj();
      });
    },
    handle() {
      sear({ value: this.searchDat.value }).then(res => {
        this.tableData = res.data;
        console.log(res);
      });
    },
  
  }
};
</script>

<style lang="scss">
.search-item {
  display: flex;
}

.ipt {
  width: 170px;
  margin-left: 10px;
  margin-top: 10px;
}
.list {
  margin-top: 20px;
}
.nm {
  margin-top: 20px;
}
.nm1 {
  margin-left: 15px;
  margin-top: 20px;
}


</style>